<template>
  <div class="content">
    <h1>车间生产信息可视化系统</h1>
    <div class="pageOne">
      <div class="topBox">
        <img src="../assets/img/msg.png" alt="" id="img" />
        <div class="leftbox">
          <div
            class="scroll-text"
            :style="{ animationDuration: duration }"
            ref="scrollContainer"
          >
            中探集团精密加工部欢迎您!
          </div>
        </div>

        <div class="rightbox">
          <span>车间：</span>
          <el-select
            placeholder="请选择车间"
            v-model="queryParams.workshopId"
            @change="workshopChange"
          >
            <el-option
              v-for="item in workshopList"
              :key="item.workshopId"
              :label="'[' + item.workshopCode + ']' + ' ' + item.workshopName"
              :value="item.workshopId"
            >
            </el-option>
            <el-option label="综合数据看板" value="0"></el-option>
          </el-select>

          <span style="margin: 5px 0 0 40px">{{ nowDate }}</span>
        </div>
      </div>

      <dv-loading v-if="loadinngAll">Loading...</dv-loading>
      <div v-else class="contentBox">
        <div class="itemOne">
          <dv-border-box-7 :color="['#1A3763', '#65CADE']">
            <div class="item-top1">
              <topThree
                :onState="onState"
                :ngState="ngState"
                :offState="offState"
                :noState="noState"
              ></topThree></div
          ></dv-border-box-7>

          <dv-border-box-7 :color="['#1A3763', '#65CADE']">
            <div class="item-top">
              <!-- <span class="span"
                >{{
                  parseFloat(((onState / alltotal) * 100 || 0.0).toFixed(2))
                }}%</span
              >
              <img src="@/assets/img/5.png" alt="" /> -->
              <dv-decoration-9
                style="width: 130px; height: 130px; color: #13aa05"
                :dur="5"
                :color="['#91f921d0', '#13aa05']"
                ><p class="cirp cirp1">
                  {{
                    parseFloat(((onState / alltotal) * 100 || 0.0).toFixed(2))
                  }}%
                </p></dv-decoration-9
              >
              <div class="item-top-text">
                <p>总运行台数</p>
                <p style="font-size: 18px; font-weight: 700">{{ onState }}</p>
                <p style="margin-left: -50px">占比</p>
                <p style="font-size: 20px; font-weight: 700">
                  {{
                    parseFloat(((onState / alltotal) * 100 || 0.0).toFixed(2))
                  }}%
                </p>
              </div>
            </div>
          </dv-border-box-7>
          <dv-border-box-7 :color="['#1A3763', '#65CADE']">
            <div class="item-top">
              <dv-decoration-9
                style="width: 130px; height: 130px; color: #fdfd2f"
                :dur="6"
                :color="['#ecec20e3', '#b8b808']"
                ><p class="cirp cirp2">
                  {{
                    parseFloat(((offState / alltotal) * 100 || 0.0).toFixed(2))
                  }}%
                </p></dv-decoration-9
              >
              <div class="item-top-text">
                <p>总待机台数</p>
                <p style="font-size: 18px; font-weight: 700">{{ offState }}</p>
                <p style="margin-left: -50px">占比</p>
                <p style="font-size: 20px; font-weight: 700">
                  {{
                    parseFloat(((offState / alltotal) * 100 || 0.0).toFixed(2))
                  }}%
                </p>
              </div>
            </div>
          </dv-border-box-7>
          <dv-border-box-7 :color="['#1A3763', '#65CADE']">
            <div class="item-top">
              <dv-decoration-9
                style="width: 130px; height: 130px; color: red"
                :dur="7"
                :color="['#fb2314d7', '#b31207']"
                ><p class="cirp cirp3">
                  {{
                    parseFloat(((ngState / alltotal) * 100 || 0.0).toFixed(2))
                  }}%
                </p></dv-decoration-9
              >
              <div class="item-top-text">
                <p>总故障台数</p>
                <p style="font-size: 18px; font-weight: 700">{{ ngState }}</p>
                <p style="margin-left: -50px">占比</p>
                <p style="font-size: 20px; font-weight: 700">
                  {{
                    parseFloat(((ngState / alltotal) * 100 || 0.0).toFixed(2))
                  }}%
                </p>
              </div>
            </div>
          </dv-border-box-7>
          <dv-border-box-7 :color="['#1A3763', '#65CADE']">
            <div class="item-top">
              <dv-decoration-9
                style="width: 130px; height: 130px; color: #c7c8c9"
                :dur="8"
                :color="['#c7c8c9d8', '#87898D']"
                ><p class="cirp cirp4">
                  {{
                    parseFloat(((noState / alltotal) * 100 || 0.0).toFixed(2))
                  }}%
                </p></dv-decoration-9
              >
              <div class="item-top-text">
                <p>总关机台数</p>
                <p style="font-size: 18px; font-weight: 700">{{ noState }}</p>
                <p style="margin-left: -50px">占比</p>
                <p style="font-size: 20px; font-weight: 700">
                  {{
                    parseFloat(((noState / alltotal) * 100 || 0.0).toFixed(2))
                  }}%
                </p>
              </div>
            </div>
          </dv-border-box-7>
        </div>
        <div class="itemTwo">
          <dv-border-box-1>
            <centerTable1 :dataList1="dataList1"></centerTable1>
          </dv-border-box-1>
          <dv-decoration-11
            style="
              width: 150px;
              height: 80px;
              margin: 100px 0;
              color: #afc1ff;
              font-weight: 700;
              font-size: 18px;
            "
            >设备生产状况</dv-decoration-11
          >
          <dv-border-box-1>
            <centerTable2 :dataList2="dataList2"></centerTable2>
          </dv-border-box-1>
        </div>
        <div class="itemThree">
          <el-radio-group
            v-model="selsectTime"
            size="small"
            class="el-radio-time"
            @change="changeTime(selsectTime)"
          >
            <el-radio-button label="1">天</el-radio-button>
            <el-radio-button label="2">周</el-radio-button>
            <el-radio-button label="3">月</el-radio-button>
          </el-radio-group>
          <dv-border-box-13>
            <span>工单达成率</span>
            <dv-loading v-if="loadinng">Loading...</dv-loading>
            <bottomBar
              v-else
              :workOrderList="workOrderList"
              :key="updateKey"
            ></bottomBar
          ></dv-border-box-13>

          <dv-border-box-3>
            <dv-decoration-6
              style="width: 18vw; height: 30px; margin: 30px 0 -20px 0"
            />
            <div class="textMsg">
              <h2>安全运行生产每一天</h2>
              <div class="p">
                “&nbsp;&nbsp;<span style="color: #fdfd27"
                  >&nbsp;{{ new Date().getFullYear() }}&nbsp;</span
                >年安全无事故运行<span style="color: #96f937; font-size: 26px"
                  >&nbsp;{{ dateNumber }}&nbsp;</span
                >
                天&nbsp;&nbsp;”
              </div>
              <div class="p1">
                <p>安全第一</p>
                <p>预防为主</p>
                <p>综合治理</p>
              </div>
            </div>
          </dv-border-box-3>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { selectWorkShop, getInteriorDataSpectaculars } from "@/api/workShopMsg";
import topThree from "./components/workShopMsg/topThree.vue";
import bottomBar from "./components/workShopMsg/bottomBar.vue";
import centerTable1 from "./components/workShopMsg/centerTable1.vue";
import centerTable2 from "./components/workShopMsg/centerTable2.vue";
export default {
  name: "workShopMsg",
  components: { topThree, bottomBar, centerTable1, centerTable2 },
  props: {},
  data() {
    return {
      loadinng: false,
      loadinngAll: false,
      updateKey: 1,
      nowDate: "",
      dataList1: [],
      dataList2: [],
      workOrderList: [],
      //运行1
      onState: 0,
      //故障2
      ngState: 0,
      //待机0
      offState: 0,
      //停机3
      noState: 0,

      // 总台数
      alltotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 2,
        workshopId: 16,
      },
      workshopList: [],
      timer: null,
      //  文字滚动
      duration: "0s",
      selsectTime: "1",
      dateNumber: 0,
    };
  },
  created() {
    this.updateTime();
    this.getWorkShop();
    sessionStorage.setItem("value1", this.queryParams.workshopId);
    sessionStorage.setItem("value2", this.selsectTime);
    this.getList();
    this.getDaysSinceYearStart();
  },
  //文字滚动
  mounted() {
    this.$nextTick(() => {
      const textWidth = this.$refs.scrollContainer.scrollWidth;
      let duration = textWidth / 20;
      // 设置一定速度值，避免太短或太长导致过快或过慢
      if (duration < 1.5) {
        duration = 1.5;
      } // 10s for 1000px
      this.duration = duration + "s";
    });
  },
  watch: {},
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    //累计天数
    getDaysSinceYearStart() {
      const now = new Date();
      const yearStart = new Date(now.getFullYear(), 0, 1);
      const diff = now - yearStart;
      const days = diff / (1000 * 60 * 60 * 24);
      this.dateNumber = Math.floor(days);
    },
    changeTime(value2) {
      this.loadinng = true;
      sessionStorage.setItem("value2", value2);
      this.getList();
    },
    //时间走动
    updateTime() {
      const today = new Date();
      let y = today.getFullYear();
      let mt = today.getMonth() + 1; // 月份是从0开始的
      let d = today.getDate();
      let h = today.getHours();
      let m = today.getMinutes();
      let s = today.getSeconds();
      mt = mt < 10 ? "0" + mt : mt;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      m = m < 10 ? "0" + m : m;
      s = s < 10 ? "0" + s : s;
      const timeString = y + "/" + mt + "/" + d + " " + h + ":" + m + ":" + s;
      // 显示时间到页面上的元素
      this.nowDate = timeString;
      // 每秒更新时间
      setTimeout(this.updateTime, 1000);
    },
    //车间
    getWorkShop() {
      selectWorkShop().then((res) => {
        this.workshopList = res.rows;
      });
    },
    //获取数据
    workshopChange(value) {
      if (value === "0") {
        this.$router.push({ path: "/home" });
      }
      this.loadinngAll = true;
      sessionStorage.setItem("value1", value);
      this.getList();
    },
    getList() {
      this.onState = 0;
      this.ngState = 0;
      this.offState = 0;
      this.noState = 0;
      this.alltotal = 0;
      getInteriorDataSpectaculars(
        sessionStorage.getItem("value1"),
        sessionStorage.getItem("value2")
      ).then((res) => {
        res.data.forEach((item) => {
          this.dataList1 = item.InteriorDataSpectaculars[0];
          this.dataList2 = item.InteriorDataSpectaculars[1];
          this.workOrderList = item.workOrderList;
          this.$nextTick(() => {
            this.updateKey += 1;
          });
        });
        this.loadinng = false;
        this.loadinngAll = false;
        this.dataList1.map((item) => {
          if (item.state == 0) {
            this.offState += 1;
          } else if (item.state == 1) {
            this.onState += 1;
          } else if (item.state == 2) {
            this.ngState += 1;
          } else if (item.state == 3) {
            this.noState += 1;
          }
        });
        this.dataList2.map((item) => {
          if (item.state == 0) {
            this.offState += 1;
          } else if (item.state == 1) {
            this.onState += 1;
          } else if (item.state == 2) {
            this.ngState += 1;
          } else if (item.state == 3) {
            this.noState += 1;
          }
        });
        this.alltotal =
          this.offState + this.onState + this.ngState + this.noState;
      });
      this.timer = setTimeout(() => {
        this.workshopChange(
          sessionStorage.getItem("value1"),
          sessionStorage.getItem("value2")
        );
      }, 1800000);
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  color: #01a7f0;
  text-align: center;
}
html,
body {
  margin: 0;
  padding: 0;
}
</style>
<style lang="scss" scoped>
h1 {
  position: absolute;
  color: #9be5fb;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  z-index: 9999;
  letter-spacing: 5px;
  margin-left: 20px;
}
#img {
  position: absolute;
  width: 35px;
  height: 35px;
}
::v-deep .el-radio-button__inner {
  background: #14304c;
  color: #75e9f3;
  font-size: 14px !important;
  width: 48px;
  height: 20px !important;
  border: none;
  text-align: center;
  line-height: 5px;
}
.el-radio-time {
  position: absolute;
  margin: -10px 0 0 1220px;
}

.leftbox {
  width: 450px;
  // height: 30px;
  overflow: hidden;
  margin-left: 40px;
  .scroll-text {
    font-size: 27px;
    color: #8993f2;
    letter-spacing: 8px;
    // position: absolute;
    white-space: nowrap;
    animation: scrollText 0s linear infinite;
    transition: transform 0.3s ease-out;
  }
}
@keyframes scrollText {
  0% {
    /* 播放完成循环播放 */
    transform: translateX(300px);
  }
  100% {
    transform: translateX(-100%);
  }
}

.pageOne {
  width: 100%;
  height: 100vh;
  background: url("~@/assets/img/back1.png") no-repeat center center fixed;
  background-size: 100% 100%;
  overflow: hidden;
  z-index: 999;
  .topBox {
    width: 93%;
    height: 60px;
    margin: 40px 0 0 3%;
    display: flex;
    justify-content: space-between;
    .rightbox {
      width: auto;
      display: flex;
      align-items: flex-start;
      span {
        font-size: 20px;
        color: #8993f2;
      }
    }
  }
}

//下拉框
::v-deep .el-input__inner {
  background-color: transparent !important;
  color: #8993f2;
  height: 35px !important;
  font-size: 18px !important;
}
/**修改边框和字体颜色 */
::v-deep .el-select {
  position: relative;
  width: 200px;
  .el-input {
    input {
      font-size: 16px !important;
      height: 35px !important;
      border-color: rgba(44, 137, 229, 0.5);
      color: #8993f2 !important;
    }
  }
}
/**修改下拉图标颜色 */
::v-deep .el-input__suffix {
  .el-input__suffix-inner {
    .el-icon-arrow-up:before {
      color: #8993f2;
      // padding-left: 0.11rem;
    }
  }
}
.contentBox {
  //   margin-top: 1%;
  height: auto;
  width: 95.5%;
  margin-left: 2%;
  padding: 0;
  .itemOne {
    width: 100%;
    height: 16vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    .dv-border-box-9,
    .dv-border-box-7 {
      width: 18%;
      height: 16vh;
    }
    .item-top1 {
      height: 16vh;
      font-weight: 700;
    }
    .item-top {
      color: #afc1ff;
      height: 16vh;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .dv-decoration-9 {
        width: 70%;
        margin-left: -10px;
      }
      .item-top-text {
        width: 30%;
        height: 80%;
        margin-top: 2%;
        margin-left: 50px;
        p {
          line-height: 10px;
        }
      }
    }
  }
  .itemTwo {
    width: 98%;
    height: 27vh;
    margin: 1.5% 15px;
    display: flex;
    justify-content: space-between;
    .dv-border-box-1 {
      width: 48%;
      height: 27vh;
      // padding: 5px 15px 5px 15px;
    }
  }
  .itemThree {
    width: 98%;
    margin: 15px;
    height: 40vh;
    display: flex;
    .dv-border-box-13 {
      width: 78%;
      height: 40vh;
      span {
        position: absolute;
        color: #8ca3f7;
        font-weight: 700;
        font-size: 18px;
        margin: -15px 0 0 -630px;
      }
    }
    .dv-border-box-3 {
      color: #829af3;
      width: 22%;
      height: 38vh;
      margin-top: 1%;
      font-weight: 700;
      .textMsg {
        width: 100%;
        height: 95%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        h2 {
          font-size: 28px;
          font-weight: 700;
          letter-spacing: 6px;
          line-height: 10px;
        }
        .p {
          font-size: 20px;
        }
        .p1 {
          width: 100%;
          // height: 5%;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          font-size: 16px;
          p {
            width: 30%;
          }
        }
      }
    }
  }
}
.cirp {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-weight: 700;
}
// .cirp1 {
//   background-color: #13aa05;
//   box-shadow: #91f921d0 0px 0px 10px 0px;
// }
// .cirp2 {
//   background-color: #b8b808;
//   box-shadow: #ecec20e3 0px 0px 10px 0px;
// }
// .cirp3 {
//   background-color: #b31207;
//   box-shadow: #fb2314d7 0px 0px 10px 0px;
// }
// .cirp {
//   background-color: #87898d;
//   box-shadow: #c7c8c9d8 0px 0px 10px 0px;
// }
</style>
